<template>
<div>
  <el-row>
    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mt15">
      <el-card>
        <template #header>
          <div class="card-header" align="center">
            <span span style='font-size:20px'><i class='el-icon-user'></i>项目成员</span>
          </div>
        </template>
        <div>
          <vxe-table
            ref="xTable"
            border
            show-overflow
            keep-source
            :auto-resize="true"
            :data="demo1.tableData"
            :edit-config="{trigger: 'click', mode: 'cell', showStatus: true}">
            <vxe-table-column type="seq" width="60"></vxe-table-column>
            <vxe-table-column field="name" title="名字"></vxe-table-column>
            <vxe-table-column field="role" title="角色"   :edit-render="{name: 'input'}" ></vxe-table-column>
            <vxe-table-column field="sex" title="性别" :edit-render="{name: '$select', options: sexList}" ></vxe-table-column>
            <vxe-table-column title="操作" align='center' width='450'>
              <template #default="{ row }">
                <vxe-button status="success" icon="el-icon-notebook-1" v-if="!$refs.xTable.isInsertByRow(row)" @click="open1()">查看个人档案</vxe-button>
                <vxe-button status="primary" icon="el-icon-position" @click="demo1.value1 = true">发布任务</vxe-button>
                <vxe-button status="warning" icon="el-icon-tickets" @click="open3()">考核</vxe-button>
              </template>
            </vxe-table-column>
          </vxe-table>
        </div>
      </el-card>
    </el-col>
  </el-row>

  <vxe-modal v-model="demo1.value1" title="发布任务" width="650" height="450" show-zoom resize remember>
    <template #default>
      <vxe-form :data="demo1.formData3" :rules="demo1.formRules3" title-align="right" title-width="60">
        <vxe-form-item title="任务信息" span="24" title-align="left" title-width="200px" :title-prefix="{icon: 'fa fa-address-card-o'}"></vxe-form-item>
        <vxe-form-item title="名称" field="name" span="24" :item-render="{name: 'input', attrs: {placeholder: '请输入名称'}}"></vxe-form-item>
        <vxe-form-item title="详情" field="nickname" span="24" :item-render="{name: 'input', attrs: {placeholder: '请输入任务需求'}}"></vxe-form-item>
        <vxe-form-item title="日期" field="sex" span="24" :item-render="{name: '$input', props: {type: 'date'}}"></vxe-form-item>
        <vxe-form-item title="其他信息" span="24" title-align="left" title-width="200px" :title-prefix="{icon: 'fa fa-info-circle'}"></vxe-form-item>
        <vxe-form-item title="补充" field="address" span="24" :item-render="{name: 'textarea', attrs: {placeholder: '请输入附加要求，没有填无'}}"></vxe-form-item>
        <vxe-form-item align="center" span="24">
          	<template #default>
								<vxe-button type="submit" status="primary">保存</vxe-button>
								<vxe-button type="reset">重置</vxe-button>
								<vxe-button
									@click="
										demo1.value1 = false;
										open4();
									"
									status="success"
									>发布</vxe-button
								>
							</template>
        </vxe-form-item>
      </vxe-form>
    </template>
  </vxe-modal>

  <el-row>
    <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" class="mt15">
      <el-card shadow="hover">
        <template #header>
          <div class="card-header">
            <span><i class='el-icon-first-aid-kit'></i> 项目进展</span>
            <span style="float: right;">
              <el-badge value="new" class="item"></el-badge>
            </span>
          </div>
        </template>
        <div class="block">
          <el-timeline>
            <el-timeline-item timestamp="2021/4/4" placement="top">
              <el-card>
                <h4>更新后端项目，上传 Github </h4>
                <p>王五 提交于 2021/4/12 20:46</p>
              </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="2021/4/3" placement="top">
              <el-card>
                <h4>更新UI界面，上传 Github </h4>
                <p>陈二 提交于 2021/4/3 20:46</p>
              </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="2021/4/2" placement="top">
              <el-card>
                <h4>测试项目</h4>
                <p>孙七 测试于 2021/4/2 20:46</p>
              </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="2021/4/1" placement="top">
              <el-card>
                <h4>发布通知</h4>
                <p>张三 发布于 2021/4/1 20:46</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </el-card>
    </el-col>

    <el-col :xs="11" :sm="11" :md="11" :lg="11" :xl="11" class="mt15">
      <el-row>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mt15">
          <el-calendar v-model="data_value">
            <template #dateCell="{data}">
              <p :class="data.isSelected ? 'is-selected' : ''">
                {{ data.day.split('-').slice(2).join('-') }} {{ data.isSelected ? '✔️' : '' }}
              </p>
            </template>
          </el-calendar>
        </el-col>

        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mt15">
          <el-card shadow="hover" style="margin: 0 0 0 20px">
            <template #header>
              <div class="card-header">
                <span><i class='el-icon-chat-dot-round'></i> 通知</span>
                <span style="float: right;">
                  <el-badge value="new" class="item"></el-badge>
                </span>
              </div>
            </template>
            <div style="height: 220px">
              <Nodify/>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</div>
</template>
<script lang='ts'>
import {toRefs, defineComponent, reactive, computed, ref,h } from 'vue'
import { VXETable, VxeTableInstance } from 'vxe-table'
import Nodify from '/@/views/project/project_grpup1/nodify.vue'
import { useRouter } from 'vue-router';

export default defineComponent({
  name: 'project_grpup1',
  components: { Nodify},
  setup () {
    const router = useRouter();
    const demo1 = reactive({
      tableData: [
        { id: 10001, name: '张三', role: '产品经理', sex: '0', age: 28, address: 'vxe-table 从入门到放弃' },
        { id: 10002, name: '李四', role: '后端Java', sex: '1', age: 22, address: 'Guangzhou' },
        { id: 10003, name: '王五', role: '后端Java', sex: '0', age: 32, address: 'Shanghai' },
        { id: 10004, name: '赵六', role: '后端Java', sex: '1', age: 23, address: 'vxe-table 从入门到放弃' },
        { id: 10005, name: '刘一', role: '前端Js', sex: '1', age: 30, address: 'Shanghai' },
        { id: 10006, name: '陈二', role: 'UI', sex: '1', age: 21, address: 'vxe-table 从入门到放弃' },
        { id: 10007, name: '孙七', role: '测试', sex: '1', age: 21, address: 'vxe-table 从入门到放弃' }
      ],
      value1: false,
    })

    const xTable = ref({} as VxeTableInstance)

    const insertEvent = async () => {
      const $table = xTable.value
      const record = {
        sex: '1'
      }
      const { row: newRow } = await $table.insert(record)
      $table.setActiveCell(newRow, 'sex')
    }

    const sexList = ref([
      { label: '', value: '' },
      { label: '男', value: '1' },
      { label: '女', value: '0' }
    ])


    const removeEvent = () => {
      const $table = xTable.value
      const selectRecords = $table.getCheckboxRecords()
      if (selectRecords.length) {
        VXETable.modal.confirm('您确定要删除选中的数据吗?').then(type => {
          if (type === 'confirm') {
            $table.removeCheckboxRow()
          }
        })
      } else {
        VXETable.modal.message({ message: '请至少选择一条数据', status: 'error' })
      }
    }

    const revertEvent = () => {
      const $table = xTable.value
      VXETable.modal.confirm('您确定要还原数据吗?').then(type => {
        if (type === 'confirm') {
          $table.revertData()
        }
      })
    }

    const open3 = () => {
      router.push({
				path: '/performance_appraisal',
			});
    }

    const saveEvent = () => {
      const $table = xTable.value
      const { insertRecords, removeRecords, updateRecords } = $table.getRecordset()
      VXETable.modal.alert(`insertRecords=${insertRecords.length} removeRecords=${removeRecords.length} updateRecords=${updateRecords.length}`)
    }

    return {
      demo1,
      xTable,
      insertEvent,
      removeEvent,
      revertEvent,
      saveEvent,
      sexList,
      open3
    }
  },
  methods: {
    open4() {
       this.$message({
          type: 'success',
          message: '发布成功！'
        })
    },
    ope2() {
        this.$prompt('请输入任务', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputErrorMessage: '邮箱格式不正确'
        }).then(({ value }) => {
          this.$message({
            type: 'success',
            message: '你的邮箱是: ' + value
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });
        });
      },
    open1() {
      this.$notify({
        title: '提示',
        message: h('i', { style: 'color: teal'}, '暂无权限！！！')
      });
    },
  },

})
</script>
<style lang="scss">
.is-selected {
    color: #1989FA;
}

.el-calendar{
	&:hover {
			box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
			transition: all ease 0.3s;
		}

  margin:0 0 0 20px;
}


.el-calendar-table .el-calendar-day {
   height: 38px;
}


.el-calendar-table thead th {
    padding: 8px 0;
    color: #606266;
    font-weight: 400;
}

.el-calendar__title{
	icon: 'el-icon-date';
}

.home-dynamic {
		height: 180px;
		.home-dynamic-item {
			display: flex;
			width: 100%;
			height: 60px;
			overflow: hidden;
			&:first-of-type {
				.home-dynamic-item-line {
					i {
						color: orange !important;
					}
				}
			}
			.home-dynamic-item-left {
				text-align: right;
				.home-dynamic-item-left-time1 {
				}
				.home-dynamic-item-left-time2 {
					font-size: 13px;
					color: gray;
				}
			}
			.home-dynamic-item-line {
				height: 60px;
				border-right: 2px dashed #dfdfdf;
				margin: 0 20px;
				position: relative;
				i {
					color: var(--color-primary);
					font-size: 12px;
					position: absolute;
					top: 1px;
					left: -6px;
					transform: rotate(46deg);
					background: white;
				}
			}
			.home-dynamic-item-right {
				flex: 1;
				.home-dynamic-item-right-title {
					i {
						margin-right: 5px;
						border: 1px solid #dfdfdf;
						width: 20px;
						height: 20px;
						border-radius: 100%;
						padding: 3px 2px 2px;
						text-align: center;
						color: var(--color-primary);
					}
				}
				.home-dynamic-item-right-label {
					font-size: 13px;
					color: gray;
				}
			}
		}
	}

</style>
